<template>
  <!-- logo -->
  <div class="flavor-logo-div">
    <router-link to="/">
      <el-image
        class="home-logo"
        src="../src/assets/logo_trans.png"
        fit="contain"
      ></el-image
    ></router-link>
  </div>
  <!-- 欢迎语 -->
  <div class="flavor-greeting">欢&nbsp&nbsp迎</div>
  <div class="flavor-greeting2">Welcome!</div>
  <!-- 步骤条 -->
  <el-steps :active="stepIndex" align-center finish-status="success">
    <el-step title="基本信息" description="我们将保护您的隐私" />
    <el-step title="口味设置" description="了解您的喜好" />
  </el-steps>
  <!-- 卡片1 -->
  <el-card class="flavor-card-1" v-if="stepIndex === 1" shadow="always">
    <div class="radioDiv"></div>
    <el-form :model="step1Form" :rules="step1Rules" ref="step1RuleForm" size="large">
      <el-form-item label="性&nbsp别" prop="sex">
        <el-radio-group v-model="step1Form.gender">
          <el-radio label="male"
            ><el-icon><Male /></el-icon>男</el-radio
          >
          <el-radio label="female"
            ><el-icon><Female /></el-icon>女</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="家&nbsp乡" prop="hometown">
        <el-cascader
          size="large"
          :options="hometownOptions"
          v-model="selectedOptions"
          @change="handleChange"
          placeholder=" "
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="生&nbsp日" prop="birthday">
        <el-date-picker v-model="step1Form.birthday" type="date" placeholder="" />
      </el-form-item>
      <!-- 按钮 -->
      <el-button class="flavor-card-1-button" round color="#E3A566" @click="gotoStep(2)"
        >基础信息填写完成！去设置口味&nbsp&nbsp<el-icon><Right /></el-icon
      ></el-button>
    </el-form>
  </el-card>
  <!-- 卡片2 -->
  <el-card class="flavor-card-2" v-if="stepIndex === 2" shadow="always">
    <el-button class="flavor-card-2-return" type="warning" text @click="gotoStep(1)"
      ><el-icon><Back /></el-icon>上一步
    </el-button>
    <el-button class="flavor-card-2-jump" type="warning" text @click="loginWihoutFlavor()"
      ><u
        >以后设置，跳过此步骤<el-icon><DArrowRight /></el-icon></u
    ></el-button>
    <div class="step2Form-div">
      <el-form
        :model="step2Form"
        :rules="step2Rules"
        ref="step2RuleForm"
        size="small"
        :inline="true"
        label-position="right"
        class="step2RuleForm"
      >
        <el-form-item label="辣" prop="spicy">
          <el-rate
            v-model="step2Form.spicy"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="甜" prop="sweet">
          <el-rate
            v-model="step2Form.sweet"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="咸" prop="salted">
          <el-rate
            v-model="step2Form.salted"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="酸" prop="acid">
          <el-rate
            v-model="step2Form.acid"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="重口" prop="heavyTaste">
          <el-rate
            v-model="step2Form.heavyTaste"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
        <el-form-item label="热" prop="hotLevel">
          <el-rate
            v-model="step2Form.hotLevel"
            :texts="['很不喜欢', '不太喜欢', '一般', '比较喜欢', '很喜欢']"
            show-text
            void-icon="ChatRound"
            :colors="['#409eff', '#67c23a', '#FF9900']"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div>
      <el-button
        class="flavor-card-1-button"
        round
        color="#E3A566"
        @click="loginwithFlavor"
        >保存口味设置，加入MenuHub<el-icon><Right /></el-icon
      ></el-button>
    </div>
  </el-card>
</template>

<script>
import { provinceAndCityData, codeToText } from "element-china-area-data";
export default {
  data() {
    return {
      stepIndex: 1,
      hometownOptions: provinceAndCityData,
      step1Form: {
        gender: "",
        hometown: "",
        birthday: "",
      },
      step1Rules: {
        sex: [
          {
            required: true,
            message: "请选择您的性别",
            trigger: "blur",
          },
        ],
        hometown: [{ required: true, message: "请选择您的家乡", trigger: "change" }],
        birthday: [
          { type: "date", required: true, message: "请选择您的生日", trigger: "change" },
        ],
      },
      step2Form: {
        userID: "",
        spicy: "",
        sweet: "",
        salted: "",
        acid: "",
        heavyTaste: "",
        hotLevel: "",
      },
      // account:{
      // avatar:"",
      // gender:"",
      // id: 0,
      // level: 0,
      // nativeplace: "",
      // password: "",
      // predictedByFilter: true,
      // role: "",
      // username: ""
      // },
      account: {},
      doStep2: false,
      selectedOptions: [],
    };
  },
  created() {
    this.account=JSON.parse(this.$store.state.account)
  },
  methods: {
    handleChange() {
      for (let i = 0; i < this.selectedOptions.length; i++) {
        this.step1Form.hometown += codeToText[this.selectedOptions[i]];
      }
      console.log(this.step1Form.hometown); //打印区域码所对应的属性值即中文地址
    },
    gotoStep(index) {
      this.stepIndex = index;
      // this.login()
    },
    //不需要更新口味信息
    loginWihoutFlavor() {
      this.doStep2 = false;
      this.login();
    },
    //更新信息并设置口味信息
    loginwithFlavor() {
      this.doStep2 = true;
      this.login();
    },
    login() {
      let _this = this;
      let url = "/users";
      this.account.gender = this.step1Form.gender;
      this.account.nativeplace = this.step1Form.hometown;
      this.account.birthday = this.step1Form.birthday;
      console.log(this.account);
      //更新用户的基本信息
      _this.$http
        .put(url, this.account)
        .then(function () {
          url = "/userflavor";
          let tmpThis = _this;
          tmpThis.$store.commit("setAccount", _this.account);
          if (!_this.doStep2) {
            tmpThis.$router.push({
              path: "/customer/home",
            });
            return
          }
          console.log("开始另一个分支")
          _this.step2Form.userID = _this.account.id;
          //更新用户的口味偏好信息
          _this.$http.post(url, _this.step2Form).then(function (response) {
            tmpThis.$message({
              message: "完成注册，开始使用系统！",
              type: "success",
            });
            tmpThis.$router.push({
              path: "/customer/home",
            });
          });
        })
        .catch((e) => this.$message.error(e.response.data));
    },
  },
};
</script>

<style>
.flavor-logo-div {
  width: 1000px;
  margin: 10px auto 0px;
  animation: greetingMove 0.5s ease-in forwards;
}
.flavor-greeting {
  font-family: sanji;
  font-size: 60px;
  color: black;
  animation: greetingMove 2s ease-in forwards;
}
.flavor-greeting2 {
  font-family: bagnardbold;
  font-size: 25px;
  color: black;
  animation: greetingMove 2.2s ease-in forwards;
  margin-bottom: 20px;
}
.el-step {
  animation: cardMove 2s ease-in forwards;
}
.el-step__title {
  font-size: 22px;
}
.el-step__description {
  margin-top: 5px;
}

/* 卡片1 */
.flavor-card-1 {
  width: 380px;
  height: 300px;
  border-radius: 20px !important;
  padding: 20px;
  margin: 30px auto;
  animation: cardMove 1s ease-in forwards;
}
/* 单选选项的圆圈 */
.el-radio__input.is-checked .el-radio__inner {
  border-color: #e3a566 !important;
  background: #e3a566 !important;
}
/* 单选选项的文字 */
.el-radio__input.is-checked + .el-radio__label {
  color: #e3a566 !important;
  font-size: 18px !important;
}
/* 选择器选中时的的边框 */
.el-cascader .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #e3a566 inset !important;
}
/* 选择器选中的文字 */
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: #e3a566 !important;
}
/* 日期选择器 */
.el-date-table td.today .el-date-table-cell__text {
  color: #e3a566 !important;
}
.el-date-table td.available:hover {
  color: #e3a566 !important;
}
.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background-color: #e3a566 !important;
}
/* 卡片1的按钮 */
.flavor-card-1-button {
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
  margin-top: 40px;
}
/* 卡片2 */
.flavor-card-2 {
  width: 480px;
  height: 350px;
  border-radius: 20px !important;
  padding: 10px;
  margin: 30px auto;
  animation: cardMove 1s ease-in forwards;
}
.flavor-card-2-return {
  float: left;
  font-family: sanji !important;
  font-size: 18px !important;
  margin-bottom: 20px;
}
.flavor-card-2-jump {
  float: right;
  font-family: sanji !important;
  font-size: 18px !important;
  margin-bottom: 20px;
}
/* 卡片2表单的盒子 */
.step2Form-div {
  float: left;
  /* margin-left: 20px; */
  margin-top: 40px;
}
.step2RuleForm {
  text-align: left;
}
/* 卡片2表单的条目 */
.el-form--inline .el-form-item {
  margin-right: 5px !important;
  width: 215px;
}
/* 卡片2的按钮 */
.flavor-card-2-button {
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
  /* margin-top: 40px; */
}

@keyframes greetingMove {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  20% {
    color: rgba(0, 0, 0, 0);
  }

  40% {
    color: rgba(0, 0, 0, 0.4);
  }

  60% {
    color: rgba(0, 0, 0, 0.6);
  }

  80% {
    color: rgba(0, 0, 0, 0.7);
  }

  100% {
    color: rgba(0, 0, 0, 1);
  }

  /* 开始状态 */
  0% {
    transform: translateY(-3vh);
  }

  /* 结束状态 */
  100% {
    transform: translateY(0px);
  }
}
@keyframes cardMove {
  0% {
    opacity: 0;
    transform: translateY(-3vh);
  }
  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>
